<template>
	<view class="">
		<view class="he1 w100pc"></view>
		<!-- 头部 -->
		<view class="fsb lrmg-30" style="height: 100rpx;">
			<image src="/static/image/9.png" style="width:86rpx;height:50rpx" class="" @click="pageback()"></image>
			<view class="flex aic">
			</view>
		</view>
		<view class="he3 w100pc"></view>
		<view class="lrmg-40">
			<view class="gray272 weight f30">請填寫申請信息</view>
			<view class="mg-t-60 gray272 f26 weight">個人信息</view>
			<view class="mg-t-60 gray272 f24">姓名</view>
			<input type="text" v-model="name" placeholder="请输入姓名" placeholder-class="gray999 f24" class="input1" />
			<view class="mg-t-30 gray272 f24">聯系方式</view>
			<input type="text" v-model="mailbox" placeholder="请输入郵件" placeholder-class="gray999 f24" class="input1" />
			<view class="flex aic">
				<view class="mg-r-10 gray666 mg-t-20 bra60 fcc" style="width: 150rpx;background: #DFDFDF;height: 60rpx;" @click="showflag = true">
					<view class="">+{{quList[flagindex].phone_code}}</view>
					<u-icon name="arrow-down" color="#999" :size="18"></u-icon>
				</view>
				<input type="number" v-model="phone" placeholder="请输入電話號碼" placeholder-class="gray999 f24" class="input1" />
			</view>
			<view class="mg-t-60 gray272 f26 weight">申請內容</view>
			<textarea placeholder="请输入文本" v-model="content" placeholder-class="gray999 f24" class="textarea1"></textarea>
			<view class="mg-t-30 gray272 f24">上傳圖片({{images.length}}/3)</view>
			<view class="mg-t-30 flex wrap">
				<view class="one1 mg-r-20 mg-b-20 rel" v-if="images != ''" v-for="(it,i) in images" :key="i">
					<image :src="getRequestUrl + it" mode="aspectFill" class="one1"></image>
					<view class="cha"><u-icon name="close-circle-fill" color="red" size="38" @click="del(i)"></u-icon></view>
				</view>
				<view class="one1 fcc mg-r-20 mg-b-20" v-if="images.length < 3" @click="shangchuan()">
					<u-icon name="plus" color="#fff" :size="60"></u-icon>
				</view>
			</view>
			<view class="mg-t-60 fsb">
				<u-button type="primary" :ripple="true" :custom-style="customStyle" @click="pageback()">返回</u-button>
				<u-button type="primary" :ripple="true" :custom-style="customStyles" @click="submit">提交</u-button>
			</view>
		</view>
		<view class="he2 w100pc"></view>
		<u-picker v-model="showflag" mode="selector" @confirm="confirm" :default-selector="[0]" :range="quList" range-key="phone_code"></u-picker>
	</view>
</template>

<script>
	var	that
	import {
		_updataTabBar,
		pageto,
		pageback
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import quhao from '../../common/js/quhao.js'
	export default{
		data(){
			return{
				tab:['USDT','MMST'],
				flag:0,
				show:false,
				customStyle: {
					color: '#fff',
					background:'#30333E',
					width:'280rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					borderRadius:'60rpx'
				},
				customStyles: {
					color: '#000',
					background:'linear-gradient(0deg, #FFC84B 0%, rgba(252,219,149,0.97) 100%)',
					width:'280rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					borderRadius:'60rpx'
				},
				name:'',
				mailbox:'',
				phone:'',
				content:'',
				images:[],
				ids:'',
				showflag:false,
				quList:[],
				flagindex:0,
				userInfo:{}
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',
				'getTextArr',
				'getLoginInfo'
			])
		},
		onLoad(e) {
			that = this
			that.ids = e.id
			that.quList = quhao
		},
		methods:{
			submit(){
				uni.showLoading({
					mask: true
				});
				let str = ''
				if(that.images.length == 1){
					str = that.images[0]
				}else if(that.images.length == 2){
					str = that.images[0] + ',' + that.images[1]
				}else if(that.images.length == 3){
					str = that.images[0] + ',' + that.images[1] + ',' + that.images[2]
				}
				let data = {
					cid:that.ids,
					name:that.name,
					mailbox:that.mailbox,
					phone:'+' + that.quList[that.flagindex].phone_code + ' ' + that.phone,
					content:that.content,
					images:str
				}
				that.$postAjax('api/MemberDonation/add',data,function(res){
					uni.hideLoading()
					uni.hideLoading()
					uni.showToast({
						title: '成功',
						icon: 'none'
					});
					setTimeout(function(){
						that.pageback()
					},800)
				})
			},
			confirm(e){
				that.flagindex = e
				console.log(that.quList[e]);
			},
			del(e){
				that.images.splice(e,1)
			},
			shangchuan(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						that.$util.uploadIMG('api/Updatefile/upload',res.tempFilePaths[0],function(res){
							console.log(JSON.parse(res.data));
							res = JSON.parse(res.data)
							that.images.push(res.data)
						})
					}
				});
			},
			dianji(e){
				that.flag = e
				that.show = !that.show
			},
			pageto(url, pp) {
				pageto(url, pp);
			},
			pageback(){
				pageback()
			}
		}
	}
</script>

<style lang="scss">
	.cha{
		position: absolute;
		right:-5rpx;
		top: -5rpx;
	}
	.input1{
		background: #DFDFDF;
		margin-top: 20rpx;
		border-radius: 60rpx;
		width: 330rpx;
		color: #666;
		font-size: 24rpx;
		padding-left: 20rpx;
		height: 60rpx;
	}
	.textarea1{
		background: #DFDFDF;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		width: calc(100% - 40rpx);
		color: #666;
		font-size: 24rpx;
		height: 200rpx;
	}
	.one1{
		background: #DFDFDF;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.one2{
		background: #18376F;
			padding: 30rpx 30rpx 0rpx;
			position: absolute;
			left: 0;
			top: 80rpx;
	}
</style>